import * as React from 'react';
import { connect } from 'react-redux';
import ReactCustomScrollBars from 'react-custom-scrollbars';

import { message, Row, Col } from 'antd';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadablePopToSort = LoadableComponent(() => import('components/common/PopToSort'));
const LoadableBookList = LoadableComponent(() => import('components/common/ItemList'));
const LoadableBookEdit = LoadableComponent(() => import('./BookEdit'));

import { fetchPageList, removePage } from 'actions/page';
import { sortLessonPages } from 'actions/lesson';

interface IndexProps {
  dispatch: (action: any) => any;
  lessonId: number;
  courseId: number;
}
interface IndexState {
  isSortBook: boolean;
  editPageId: any;
  pageList: any[];
}

class BookIndex extends React.Component<IndexProps, IndexState> {
  static defaultProps: IndexProps = {
    dispatch: () => {},
    lessonId: 0,
    courseId: 0,
  };
  constructor(props: IndexProps) {
    super(props);
    this.state = {
      isSortBook: false,
      editPageId: null,
      pageList: [],
    };
  }

  componentDidMount() {
    if (this.props.lessonId) {
      this.handleFetchBookPageList();
    }
  }

  componentWillReceiveProps(nextProps: any) {
    const { lessonId } = nextProps;
    const { lessonId: oldLessonId } = this.props;

    if (lessonId !== oldLessonId) {
      this.handleFetchBookPageList(lessonId);
    }
  }

  handleFetchBookPageList = (lessonId: number = this.props.lessonId, callback = () => {}) => {
    const { dispatch } = this.props;
    dispatch(fetchPageList(lessonId, 1)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        this.setState({
          pageList: result.response.data.items,
        });
        callback();
      }
    });
  };

  newPageCallback = (editPageId: number) => {
    this.handleFetchBookPageList(this.props.lessonId, () => {
      this.setState({
        editPageId,
      });
    });
  };

  handleSortCancel = () => {
    this.setState({
      isSortBook: false,
    });
  };

  handleSortBook = () => {
    this.setState({
      isSortBook: true,
    });
  };

  handleSortOk = (sortedIds: number[]) => {
    const { dispatch, lessonId } = this.props;

    dispatch(sortLessonPages(lessonId, sortedIds)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        this.handleFetchBookPageList(lessonId);
        this.setState({
          isSortBook: false,
        });
        message.success('保存成功');
      }
    });
  };

  handleEdit = (editPageId: any = 0) => {
    this.setState({
      editPageId,
    });
  };

  handleRemove = (editPageId: any) => {
    const { dispatch, lessonId } = this.props;
    dispatch(removePage(lessonId, editPageId)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        this.handleFetchBookPageList(lessonId);
        this.setState({
          editPageId: null,
        });
        message.success('删除成功');
      }
    });
  };

  render() {
    const { editPageId, isSortBook, pageList } = this.state;
    const { lessonId } = this.props;

    return (
      <div>
        {isSortBook && (
          <LoadablePopToSort
            sortName="绘本页排序"
            items={pageList}
            onCancel={this.handleSortCancel}
            onOk={this.handleSortOk}
          />
        )}
        <Row gutter={16}>
          <Col span={5}>
            <div
              className="steps-wrap"
              style={{ padding: 0, borderRight: '1px solid #efefef', paddingRight: 10 }}>
              <ReactCustomScrollBars>
                <LoadableBookList
                  parentId={lessonId}
                  activeId={editPageId}
                  items={pageList}
                  onSort={this.handleSortBook}
                  onEdit={this.handleEdit}
                  onRemove={this.handleRemove}
                  title="绘本"
                />
              </ReactCustomScrollBars>
            </div>
          </Col>
          <Col span={19}>
            {editPageId !== null && (
              <div className="activity-edit-wrap test-parser-modal">
                <LoadableBookEdit
                  lessonId={lessonId}
                  pageId={editPageId}
                  newPageCallback={this.newPageCallback}
                />
              </div>
            )}
          </Col>
        </Row>
      </div>
    );
  }
}

interface OwnProps {
  lessonId: number;
  courseId: number;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { lessonId, courseId } = ownProps;

  return {
    lessonId,
    courseId,
  };
}

export default connect(mapStateToProps)(BookIndex);
